{% stylesheet %}
  .block_product_single {
    max-width: var(--general_layout_width);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin: 0 auto;
  }

  .block_product-fill {
    width: 100%;
    max-width: 100%;
  }

  .block_product_single-right {
    flex-direction: row-reverse;
  }
  .block_product_single-right .product-photo {
    padding-left: 30px;
  }
  .block_product_single-left .product-photo {
    padding-right: 30px;
  }
  .block_product_single .product-photo {
    width: 50%;
    box-sizing: border-box;
  }

  .block_product_single .product-photo .product-photo-item {
    width: 100%;
    margin-bottom: 20px;
  }

  .block_product_single .product-photo .product-photo-item img {
    width: 100%;
    vertical-align: top;
  }

  .block_product_single .product-info {
    width: 50%;
    box-sizing: border-box;
  }

  .block_product_single .product-info .cell-item {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }

  .block_product_single .product-info .product-info-title {
    text-align: center;
    font-size: var(--big_product_font_size);
    margin-bottom: 20px;
  }

  .block_product_single .product-info .product-info-subtitle {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 16px;
    color: var(--title_color);
    font-size: 20px;
    opacity: .6;
  }
  @media screen and (min-width: 768px) {
    .block_product_single .product-info .product-info-subtitle {
      margin-top: 32px;
    }
  }

  .block_product_single .product-info .product-info-describe {
    text-align: center;
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--detail_color);
  }

  .block_product_single .product-info .product-sku-name {
    font-size: 1rem;
    color: var(--color-text-medium);
    line-height: 1.2857142857rem;
  }

  .block_product_single .product-info .product-price {
    font-size: 1.4285714286rem;
    line-height: 1.7142857143rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;

  }

  .block_product_single .product-info .product-price .product-price-number {
    color: var(--assist-color);
    margin-bottom: 6px;
  }

  .block_product_single .product-info .product-price .product-price-market {
    color: var(--color-text-low);
    text-decoration: line-through;
    margin-left: 10px;
    margin-bottom: 6px;

  }

  .block_product_single .product-info .product-price .product-price-discount {
    color: var(--buying_parice_color);
    background-color: var(--discount_tag_bg);
    color: var(--discount_tag_color);
    border-radius: 4px;
    font-size: 13px;
    padding: 1px 8px;
    margin-left: 10px;
    margin-bottom: 6px;

  }

  .block_product_single .product-info .product-sku-values {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .block_product_single .product-info .product-sku-values .product-sku-values-item {
    display: flex;
    align-items: center;
    color: var(--color-main);
    font-size: 1rem;
    /**  line-height: 2.2857142857rem;
    height: 2.2857142857rem;
     **/
    padding: 8px 15px;
    box-sizing: border-box;
    border: 1px solid transparent;
    cursor: pointer;
    margin-bottom: 12px;
  }

  /* .block_product_single .product-info .product-sku-values .product-sku-values-item + .product-sku-values-item {
  margin-right: 20px;
} */

  .block_product_single .product-info .product-sku-values .product-sku-values-item:hover {
    border: 1px solid var(--color-main);
  }

  .block_product_single .product-info .product-sku-values .product-sku-values-item-active {
    border: 1px solid var(--color-main);
  }

  .block_product_single .product-info .product-sku-values img {
    width: 40px;
    vertical-align: middle;
    height: 40px;
    margin-right: 6px;
    object-fit: cover;
  }

  .block_product_single .product-info .product-calculator {
    height: 44px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
  }

  .block_product_single .product-info .product-calculator .product-calculator-handle,
  .block_product_single .product-info .product-calculator .product-calculator-value {
    width: 44px;
    text-align: center;
    line-height: 44px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
  }

  .block_product_single .product-info .product-calculator .product-calculator-value {
    margin: 0 30px;
    font-size: 1rem;
    color: var(--color-main);
  }

  .block_product_single .product-info .product-calculator .product-calculator-handle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .block_product_single .product-info .product-calculator .add-icon {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
  }

  .block_product_single .product-info .product-calculator .add-icon::before {
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 1px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
  }

  .block_product_single .product-info .product-calculator .add-icon::after {
    position: absolute;
    left: 7px;
    width: 1px;
    height: 15px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
  }

  .block_product_single .product-info .product-calculator .reduce-icon {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
  }

  .block_product_single .product-info .product-calculator .reduce-icon::before {
    position: absolute;
    left: 0;
    top: 7px;
    width: 15px;
    height: 1px;
    opacity: 0.9;
    background: var(--color-main);
    border-radius: 1px;
    content: "";
  }

  .block_product_single .product-info .product-btns {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .block_product_single .product-info .product-btns .add-cart {
    width: 100%;
    margin: 0 0 15px;
    box-sizing: border-box;
  }

  .block_product_single .product-info .product-btns .buynow {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  .block_product_single .product-info .product-btns .divider {
    width: 20px;
  }

  @media screen and (max-width: 787px) {
    .block_product_single {
      display: flex;
      flex-direction: column;
    }
    .block_product_single .product-photo {
      width: 100%;
      padding: 0;
    }
    .block_product_single .product-info {
      width: 100%;
      padding: 0;
    }
  }



  .block_product_single .cell-star {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 15px;
  }

  .block_product_single .product-comment-fraction {
    display: flex;
    align-items: center;
  }

  .block_product_single .product-comment-fraction svg {
    margin-right: 4px;
  }

  .block_product_single .product-comment-fraction > svg:last-child {
    margin-right: 0;
  }

  .block_product_single .product-comment-fraction span {
    font-weight: 500;
    color: #1d1f21;
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
  }

  .block_product_single .comment-star-warp {
    position: relative;
    display: flex;
    align-items: center;
  }

  .block_product_single .comment-star-warp-choose {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .block_product_single .comment-star-warp-choose svg {
    flex-shrink: 0;
  }
{% endstylesheet %}

{% assign data = section.settings %}
{% assign product_shopping_btn = theme_config.global.product_shopping_btn | default :'show' %}
{% assign block_id = block_id | default : section.block_id  %}

{% if section.settings.good.id != "" %}

  {% get_product product_id={section.settings.good.id} %}
  {% if product %}
    <div class="product_single_wrapper" style="--bg-color: {{data.bg_color}};">
      <div class="container_wrapper">
        {% include 'title',title: data.title,detail: data.detail,text_algin: 'text-center' %}
      </div>
      <div id="block_product_single-{{ block_id }}" class="container_wrapper block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
        <div class="product-photo">
          {%- capture handle -%}/products/{{ product.handle }}?data_from={{data_from}}{%- endcapture -%}
          {%- assign productId =  block_id | default: block_id  -%}
          {% include 'product_preview', productHref:handle, previewImage:product.images ,productId: productId,blockId:block_id, showSmall:true,source:"block_product_single" %}
        </div>
        <div class="product-info {{theme_config.global.product_right_float}}" id="sku-option-{{ block_id }}">
          <!-- title -->
          <div class="plugin-product_single-title_top" data-product-id="{{product.id}}"></div>
          {% if section.settings.subtitle %}
            <div class="product-info-subtitle">{{ product.subtitle }}</div>
          {% endif %}
          <div class="product-info-title general_title-color">
            <a href="/products/{{ product.handle }}?data_from={{data_from}}">{{ product.title | default: "Title" }}</a>
          </div>
          {% include 'comment_star', class:"cell-star", score:product.star %}
          {% comment %} sku spu控制 {% endcomment %}
          {% include 'product_sku_spu_show', className:"product-info-describe",style:"",spu:product.spu,sku:product.variant.sku %}
          {% if section.settings.describe %}
            <div class="product-info-describe">{{ product.mini_detail }}</div>
          {% endif %}

          <div class="product-info-divider"></div>
          <div class="cell-item" style="margin-top: 0">
            <div class="product-price">
              <span class="product-price-number general_buying-color">{{ currency.symbol_left }}{{ product.variant_price_max | default: "0.00" }}</span>
              {% if product.variant_compare_at_price_max %}
                <span class="product-price-market general_original-color">{{ currency.symbol_left }}{{ product.variant_compare_at_price_max }}</span>
              {% endif %}
              {%- if product.id and theme_config.global.product_discount_label_style_switch -%}
                <div class="product-price-discount"></div>
              {%- endif -%}
            </div>
          </div>
          {%- if product.virtual_sale_count -%}
            <div class="product-info-describe virtual_sale">{{ product.virtual_sale_count | plus: product.sale_count }} {{lang.product.sold}}</div>
          {%- endif -%}
          <div class="plugin-product_single-price_bottom" data-product-id="{{product.id}}"></div>

          <div class="sku-cell"></div>
          <div class="plugin-product_single-quantity_top" data-product-id="{{product.id}}"></div>
          {% if theme_config.global.product_quantity or theme_config.global.product_quantity  == nil %}
            <div class="cell-item">
              <span class="product-sku-name">{{lang.cart.list.quantity}}</span>
            </div>
            <div class="cell-item product-calculator-cell-item">
              <div class="flex gap-4 flex-1">
                <div class="product-calculator" id='mo-quantity-{{ block_id | default : section.block_id }}'>
                  <div class="product-calculator-handle" data-type='reduce'>
                    {% include icon_minus ,{width:'16',height:'16'} %}
                  </div>
                  <input class="product-calculator-value"  min="1" type="number" value="{{theme_config.global.product_quantity_number | default:1}}"/>
                  <div class="product-calculator-handle" data-type='add'>
                    {% include icon_plus ,{width:'16',height:'16'} %}
                  </div>
                </div>

                {%- if product_shopping_btn != 'hide' -%}
                  {%- if product_shopping_btn == 'add' or product_shopping_btn == 'show'  -%}
                    <div class="product-cart-group flex-1">
                      <div class="secondary_btn product-cart control-product_detail-cart mt-0" style="width:100%;" data-type="cart" data-plug="cart" id='add-cart-{{ block_id | default : section.block_id }}'>{{lang.product.add_to_cart}}</div>
                    </div>
                  {%- endif -%}
                {% endif %}

              </div>

            </div>
          {% endif %}

          <div class="plugin-product_single-buy_top" data-product-id="{{product.id}}"></div>
          <div class="product-btns product-calculator-cell-item">
            {%- if product_shopping_btn != 'hide' -%}
              <div class="product-btns product-cart-group" style="{% if product.available == 0 %}display:none{% endif %}">
                {%- if product_shopping_btn == 'buy' or product_shopping_btn == 'show'  -%}
                  <div class="main_btn product-now control-product_detail-buy" style='margin-top:15px' data-type="buyNow" data-plug="buy_now" id="buynow-{{ block_id | default : section.block_id }}">{{lang.product.buy_it_now}}</div>
                {%- endif -%}
              </div>
            {%- endif -%}
            <div class="product-btns product-out-of-stock" style="{% if product.available == 1 %}display:none{% endif %};margin-top: 15px;">
              <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block">{{lang.product.out_of_stock}}</div>
            </div>
            <div class="product-btns product-out-of-delete" style="display: none;margin-top: 15px;">
              <div class="mo-btn mo-btn-default mo-btn-disable mo-btn-plan mo-btn-max mo-btn-block" >{{lang.account.wishlist.product_offline}}</div>
            </div>
          </div>
          {% unless product.available == 0 %}
            {% get_payments %}
            {% if payment %}
              <div class="cell-item product-payment-box" style="margin-top:17px">
                {% include product_payment_paypalcheckout , { pay_block_id:block_id } %}
              </div>
            {% endif %}
          {% endunless %}
          <div class="plugin-product_single-buy_bottom" data-product-id="{{product.id}}"></div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $(function() {
        var productInfo = {{ product | json }};

        const productDetail = new omesaasProduct({
          product: productInfo,
          data_from: `{{ data_from }}`,
          ec_currency_code: `{{ base_currency.standard_code }}`,
          id: `#sku-option-{{ block_id }}`,
          block_id: `{{block_id}}`,{% if theme_config.global.product_quantity == true %}quantity : {{ theme_config.global.product_quantity_number | default:1 }},{% endif %}
        })

// PayPal payment callback succeeded
        moi
          .addEvent('paypalec_callback', function(event) {

  // Check whether the payID is equal to the current building block ID
            if (event.params.payId === '{{ block_id }}') {
              productDetail.callbackAddToCart();
            }
          })

          moi
          .quantity({
            dom: $(`#mo-quantity-{{ block_id | default : section.block_id }}`),
            change(val) {
              productDetail.setSelectedVal({quantity: val.value});
              qty = val.value;
            }
          })


  // Add to cart
          $(`#add-cart-{{ block_id | default : section.block_id }}`)
          .click(function() {
            if (! productDetail.verifyOption('cart')) {
              return false
            }
            var load = moi.nodeShowLoading(this, "mo-loading-black")
            productDetail.addCart(function() {
              load.close();
            }, function(data) {
              if (! data.code) {
                productDetail.cartLayer();
              } else {
                return moi.alert({title: data.msg});
              }
            })
          })


  // Direct purchase
          $(`#buynow-{{ block_id | default : section.block_id }}`)
          .click(function() {
            if (! productDetail.verifyOption('buy')) {
              return false
            }
            var load = moi.nodeShowLoading(this)
            productDetail.buynow(function() {
              load.close();
            }, function(ret) {
              if (! ret.code) {
                window.location.href = ret.data.checkout_url
              } else {
                return moi.alert({title: ret.msg});
              }
            })
          })

      })
    </script>
  {% endif %}
{% else %}
  <div class="product_single_wrapper">
    <div id="block_product_single-{{ block_id | default: 'test' }}" style="padding:20px 0" class="container_wrapper block_product_single block_product_single-{{ section.settings.position }} {% if section.settings.is_width_fill %}block_product-fill{% endif %}">
      <div class="product-photo">
        <div class="product-photo-item">
          <img style="width: 100%" src="{{ 'empty.png' | public_asset_abs_url }}"/>
        </div>
      </div>
      <div class="product-info">
        <div class="product-info-title general_title-color">title</div>
        {% if section.settings.describe %}
          <div class="product-info-describe">describe</div>
        {% endif %}
        <div class="product-info-divider"></div>
        <div class="cell-item" style="margin-top: 0">
          <div class="product-price">
            <span class="product-price-number general_buying-color">{{ currency.symbol_left }}8.88</span>
            <span class="product-price-market general_original-color">{{ currency.symbol_left }}8.88</span>
          </div>

        </div>
        <div class="plugin-product_single-quantity_top"></div>
        <div class="cell-item">
          <span class="product-sku-name">Quantity</span>
        </div>
        <div class="cell-item">
          <div class="product-calculator mo-quantity">
            <div class="product-calculator-handle" data-type="reduce">
              <span class="reduce-icon"></span>
            </div>
            <div class="product-calculator-value">1</div>
            <div class="product-calculator-handle" data-type="add">
              <span class="add-icon"></span>
            </div>
          </div>
        </div>
        <div class="cell-item">
          <div class="product-btns">
            <div class="secondary_btn add-cart" data-id="{{ block_id | default: 'test'  }}">{{lang.product.add_to_cart}}</div>
            <div class="main_btn buynow" data-id="{{ block_id | default: 'test'  }}">{{lang.product.buy_it_now}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>


{% endif %}



{% schema %}
  {
    "tag": "",
    "class": "block_product_single",
    "is_global": false,
    "name": {
      "zh_CN": "单个商品",
      "en_US": "Single product"
    },
    "max_blocks": "",
    "settings": [
      {
        "type": "card_header",
        "label": {
          "zh_CN": "设置",
          "en_US": "Settings"
        }
      },
      {
        "type": "card_product",
        "label": {
          "zh_CN": "选择商品",
          "en_US": "Select product"
        },
        "default": {
          "id": "id",
          "title": ""
        },
        "id": "good"
      },
      {
        "type": "card_input",
        "id": "title",
        "label": {
          "zh_CN": "标题",
          "en_US": "Title"
        },
        "placeholder": {
          "zh_CN": "请输入标题",
          "en_US": "Please enter title"
        },
        "default": "Featured product"
      },
      {
        "type": "card_text_editor",
        "id": "detail",
        "label": {
          "zh_CN": "简短描述",
          "en_US": "Short description"
        },
        "placeholder": {
          "zh_CN": "请输入描述",
          "en_US": "Please enter a description"
        },
        "default": "Share information about your brand with your customers."
      }, {
        "type": "card_color",
        "id": "bg_color",
        "label": {
          "zh_CN": "背景颜色",
          "en_US": "Background color"
        },
        "default": "#fdf9ee"
      }, {
        "type": "card_switch",
        "label": {
          "zh_CN": "显示副标题",
          "en_US": "Show subheadings"
        },
        "id": "subtitle",
        "default": true
      }, {
        "type": "card_switch",
        "label": {
          "zh_CN": "显示简短描述",
          "en_US": "Show a short description"
        },
        "id": "describe",
        "default": true
      }, {
        "type": "card_select",
        "label": {
          "zh_CN": "pc图片位置",
          "en_US": "PC image location"
        },
        "default": "left",
        "id": "position",
        "option": [
          {
            "label": {
              "zh_CN": "居左",
              "en_US": "To the left"
            },
            "value": "left"
          }, {
            "label": {
              "zh_CN": "居右",
              "en_US": "To the right"
            },
            "value": "right"
          }
        ]
      }
    ],
    "blocks": [],
    "default": {
      "settings": {
        "good": {
          "id": "",
          "title": ""
        },
        "title": "Featured product",
        "detail": "Share information about your brand with your customers.",
        "bg_color": "#fdf9ee",
        "subtitle": true,
        "describe": true,
        "position": "right"
      },
      "blocks": []
    },
    "icon": "icon-dangeshangpin"
  }
{% endschema %}